<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>translate3d()</title>
	<style type="text/css">
		.stage {
			width: 300px;
			height: 300px;
			float: left;
			margin: 15px;
			position: relative;
			background: url(images/bg-grid.jpg) no-repeat center center;
			background-size: 100% 100%;
			
			-webkit-perspective: 1200px;
			-moz-perspective: 1200px;
			-ms-perspective: 1200px;
			-o-perspective: 1200px;
			perspective: 1200px;
		}
		.container {
			position: absolute;
			top: 50%;
			left: 50%;
			
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			-o-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		.container img {
			position: absolute;
			margin-left: -35px;
			margin-top: -50px; 
		}
		.container img:nth-child(1){
			z-index: 1;
			opacity: .6;
		}
		.s1 img:nth-child(2){
			z-index: 2;	
			-webkit-transform: translate3d(30px,30px,200px);
			-moz-transform: translate3d(30px,30px,200px);
			-ms-transform: translate3d(30px,30px,200px);
			-o-transform: translate3d(30px,30px,200px);
			transform: translate3d(30px,30px,200px);
		}
		.s2 img:nth-child(2){
			z-index: 2;	
			-webkit-transform: translate3d(30px,30px,-200px);
			-moz-transform: translate3d(30px,30px,-200px);
			-ms-transform: translate3d(30px,30px,-200px);
			-o-transform: translate3d(30px,30px,-200px);
			transform: translate3d(30px,30px,-200px);
		}
		
	</style>
</head>
<body>
<div class="stage s1">
	<div class="container">
		<img src="images/cardKingClub.png" alt="" width="70" height="100" />
		<img src="images/cardKingClub.png" alt="" width="70" height="100" />
	</div>
</div>
<div class="stage s2">
	<div class="container">
		<img src="images/cardKingClub.png" alt="" width="70" height="100" />
		<img src="images/cardKingClub.png" alt="" width="70" height="100" />
	</div>
</div>
	
	
</body>
</html>